Page({
  onShow: function () {
    const app = getApp();
    this.setData({
      active: app.globalData.active,
    });
  },
  data: {
    locationText: "", // 用于显示位置信息
    weatherText: "", // 用于显示天气信息
    bannerImages: [
      // 轮播图图片路径数组
      { url: "../images/banner.jpg" },
      { url: "https://z1.ax1x.com/2023/10/21/piFx8IK.jpg" },
      { url: "https://z1.ax1x.com/2023/10/21/piFxYGD.jpg" },
    ],
    navBarColor: "#000000", // 初始导航栏颜色为黑色
  },

  onLoad: function () {
    // 页面加载时执行的代码
    // 获取用户位置并获取天气数据
    this.getLocationAndWeather();

    // 自动播放轮播图
    this.playBanner();
  },

  // 获取用户位置并获取天气数据
  getLocationAndWeather: function () {
    wx.getLocation({
      type: "wgs84", // 使用 GPS 坐标
      success: (res) => {
        const latitude = res.latitude; // 纬度
        const longitude = res.longitude; // 经度

        // 在这里可以调用获取天气信息的函数，并传入经纬度参数
        this.getWeatherInfo(longitude, latitude);

        // 调用逆地理编码函数
        this.reverseGeocode(longitude, latitude);
      },
      fail: (error) => {
        console.error("获取位置信息失败", error);
      },
    });
  },

  // 自定义函数：获取天气信息
  getWeatherInfo: function (longitude, latitude) {
    // 替换为您的和风天气 API 密钥和接口地址
    const apiKey = "7d2b93fbf4ff401a8f9c223be0664787";
    const apiUrl = `https://devapi.qweather.com/v7/weather/now?location=${longitude},${latitude}&key=${apiKey}`;

    wx.request({
      url: apiUrl,
      success: (res) => {
        const weatherData = res.data;
        // 处理天气数据，提取需要的信息
        const temperature = weatherData.now.temp; // 温度
        const weatherCondition = weatherData.now.text; // 天气状况

        // 在这里可以更新页面上的天气信息
        this.updateWeatherInfo(
          longitude,
          latitude,
          temperature,
          weatherCondition
        );
      },
      fail: (error) => {
        console.error("获取天气信息失败", error);
      },
    });
  },

  // 自定义函数：更新天气信息
  updateWeatherInfo: function (longitude, latitude, temperature, condition) {
    // 更新页面上的天气信息
    const weatherText = `天气状况：${condition}，温度：${temperature}°C`;

    // 将上述信息设置到页面的相应元素上
    this.setData({
      weatherText: weatherText,
    });
  },

  // 自定义函数：逆地理编码
  reverseGeocode: function (longitude, latitude) {
    // 替换为您的百度地图 API 密钥
    const apiKey = "xkxgByy2zAZzEtqlFEXewqWEiXoQ6QAX";
    const apiUrl = `https://api.map.baidu.com/reverse_geocoding/v3/?ak=${apiKey}&output=json&coordtype=wgs84ll&location=${latitude},${longitude}`;

    wx.request({
      url: apiUrl,
      success: (res) => {
        const locationData = res.data.result;

        // 提取汉字位置信息
        const formattedAddress = locationData.addressComponent.district;
        // 更新页面上的位置信息
        this.setData({
          locationText: formattedAddress,
        });
      },
      fail: (error) => {
        console.error("逆地理编码失败", error);
      },
    });
  },

  // 自定义函数：自动播放轮播图
  playBanner: function () {
    // 使用 wx.createSelectorQuery 获取 swiper 组件
    const query = wx.createSelectorQuery();
    query.select(".swiper").fields({
      size: true,
    });
    query.exec((res) => {
      if (res[0]) {
        // 获取 swiper 组件的高度
        const swiperHeight = res[0].height;

        // 设置自动播放
        setInterval(() => {
          const swiper = this.selectComponent(".swiper");
          swiper.scrollBy(1); // 播放下一张图片
        }, 3000); // 每隔 3 秒切换一次
      }
    });
  },

  // 自定义函数：获取轮播图的主要颜色并设置导航栏颜色
  getBannerMainColor: function () {
    const colorThief = new ColorThief();
    const firstImageUrl = this.data.bannerImages[0].url;

    // 获取图片信息
    wx.getImageInfo({
      src: firstImageUrl,
      success: (res) => {
        // 获取图片信息成功
        const image = {
          width: res.width,
          height: res.height,
          data: new Uint8Array(res.data),
        };

        // 获取轮播图的主要颜色
        const mainColor = colorThief.getColor(image);

        // 设置导航栏背景颜色为轮播图的主要颜色
        wx.setNavigationBarColor({
          frontColor: "#ffffff", // 文字颜色，白色
          backgroundColor: `rgb(${mainColor[0]}, ${mainColor[1]}, ${mainColor[2]})`, // 背景颜色，轮播图的主要颜色
          animation: {
            duration: 400,
            timingFunc: "easeIn",
          },
          success: () => {
            console.log("导航栏背景颜色设置成功");
          },
          fail: () => {
            console.log("导航栏背景颜色设置失败");
          },
          complete: () => {
            console.log("导航栏背景颜色设置结束");
          },
        });

        // 更新页面数据中的导航栏颜色
        this.setData({
          navBarColor: `rgb(${mainColor[0]}, ${mainColor[1]}, ${mainColor[2]})`,
        });
      },
      fail: (error) => {
        console.error("获取图片信息失败", error);
      },
    });
  },
});
